$(function () {
    layui.use(['table','form','layer','laydate'], function(){
        var table = layui.table;
        let form = layui.form;
        let layer = layui.layer;
        let laydate = layui.laydate;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '/getAllNotice' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'nNo', title: '编号', width:50, sort: true, fixed: 'left'}
                ,{field: 'nTitle', title: '标题', width:150}
                ,{field: 'nContent', title: '内容', width:200, sort: true}
                ,{field: 'nTime', title: '发布时间', width:110}
                ,{fixed: 'right', title:'操作', toolbar: '#tool', width:140}
            ]]
        });
        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('demo', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        time: $("#time").val
                    }
                }, 'data');
            }
        };
        $('#searchbt').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(notice)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let nNo = data.nNo;
            if(layEvent === 'modify') { //查看
                layer.open({
                    type: 1,
                    title: '公告修改',
                    area: ['530px','350px'],
                    content: '<div class="layui-col-md12" style="padding-top: 20px">\n' +
                        '                <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->\n' +
                        '                    <div class="layui-form-item">\n' +
                        '                        <label class="layui-form-label">标题</label>\n' +
                        '                        <div class="layui-input-block">\n' +
                        '                            <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input" id="title" style="width: 400px">\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                    <div class="layui-form-item layui-form-text">\n' +
                        '                        <label class="layui-form-label">公告内容</label>\n' +
                        '                        <div class="layui-input-block">\n' +
                        '                            <textarea placeholder="请输入内容" class="layui-textarea" name="content" id="content" style="width: 400px"></textarea>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                    <div class="layui-form-item">\n' +
                        '                        <label class="layui-form-label">修改时间</label>\n' +
                        '                        <div class="layui-input-block">\n' +
                        '                            <input type="text" name="time1" placeholder="请输入" autocomplete="off" class="layui-input" id="time1" style="width: 400px">\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                    <div class="layui-form-item">\n' +
                        '                        <div class="layui-input-block">\n' +
                        '                            <button class="layui-btn" lay-submit lay-filter="*">修改</button>\n' +
                        '                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->\n' +
                        '                </form>\n' +
                        '            </div>',
                    success: function () {
                        form.render();

                        laydate.render({
                            elem: '#time1' //指定元素
                        });
                        $("#title").val(data.nTitle)
                        $("#content").val(data.nContent)
                        $("#time1").val(data.nTime)

                        form.on('submit(*)',function (form) {
                            layer.open({
                                title: '修改',
                                content: '是否修改'
                                ,btn: ['确定', '取消']
                                ,yes: function(index, layero){
                                    //按钮【按钮一】的回调
                                    let title = $("#title").val();
                                    let content = $("#content").val();
                                    let time1 = $("#time1").val();
                                    if (time1===""||content===""||title===""){
                                        layer.msg("公告内容不完整")
                                        return false;
                                    }else {
                                        $.post("/modifyNotice",{"title":title,"content":content,"time":time1,"nNo":nNo},function (data) {
                                            if (data.code===200){
                                                window.location.href = "noticemanage.html"
                                            }else {
                                                layer.msg(data.msg)
                                                return false
                                            }
                                        })
                                    }
                                }
                                ,btn2: function(index, layero){
                                    //按钮【按钮二】的回调

                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                                ,cancel: function(){
                                    //右上角关闭回调

                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                            });
                            return false
                        })
                    }
                })
            }else if (layEvent === 'delete'){
                layer.open({
                    title: '删除',
                    content: '是否删除此公告'
                    ,btn: ['确定', '取消',]
                    ,yes: function(index, layero){
                        //按钮【按钮一】的回调
                        $.post("/deleteNotice",{"nNo":nNo},function (data) {
                            if (data.code===200){
                                window.location.href = "noticemanage.html"
                            }else {
                                layer.msg(data.msg)
                                return false
                            }
                        },"json")
                    }
                    ,btn2: function(index, layero){
                        //按钮【按钮二】的回调

                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                    ,cancel: function(){
                        //右上角关闭回调

                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
            }
        })
    });
})